<template>
  <div class="task">
    <div class="odds c-shadow">
      <p class="col1">
        <el-input class="personName left" v-model="personName" placeholder="请输入特征词" @keyup.enter.native="search" clearable></el-input>
        <span class="searchItem">预警模型 :</span>
        <span class="personNames">
          非法集资模型
        </span>
        <!-- <el-input class="personName left" v-model="fliterData1" disabled></el-input> -->
        <!-- <el-select v-model="fliterData1" ref="selectDate" class="left" disabled placeholder="非法集资模型">
          <el-option
            v-for="(item,ind) in fliterDatas1"
            :key="ind"
            :label="item"
            :value="item">
          </el-option>
        </el-select> -->
        <span class="searchItem">用户 :</span>
        <span class="personNames">
          通用版关键词
        </span>
        <!-- <el-input class="personName left" v-model="fliterData2" disabled></el-input> -->
        <!-- <el-select v-model="fliterData2" ref="selectDate" class="left" disabled placeholder="通用版关键词">
          <el-option
            v-for="(item,ind) in fliterDatas2"
            :key="ind"
            :label="item"
            :value="item">
          </el-option>
        </el-select> -->
      <p class="col2">
        <span class="buttons">
          <span class="searchItem">关键词类型 :</span>
          <ol class="keyTypeList" v-for="(list,index) in keyTypeList" :key="index">
            <li @click="changeType(list)">
              <span :class="{addbackg:list.flag,bacblue:!list.flag}">{{list.name}}</span>
            </li>
          </ol>
        </span>
        <el-button type="primary" class="btn-search fr" @click="search"><i class="iconfont icon-search ent-search"></i> 搜索</el-button>
      </p>
    </div>
    <div class="list c-shadow">
      <div class="taskTotal">
        <span class="publist-list-category fr">
          <span class="searchItem">排序 :</span>
          <j-select ref="selectDate" class="select" v-model="fliterData" :initItems="fliterDatas" :selectedIndex="fliterDataidx">
          </j-select>
          <j-select ref="selectDate" class="select" v-model="fliterData3" :initItems="fliterDatas3" :selectedIndex="fliterDataidx3">
          </j-select>
        </span>
        <span class="fr zeng">
          <el-button type="primary" plain class="btn-search" @click="addlists()"><i class="iconfont icon-search ent-search"></i> 新增</el-button>
        </span>
      </div>
      <j-no-data :mode="'b'" msg="b" v-if="lists.length === 0"></j-no-data>
      <table class="table-fixed lists" width="100%" border="0" cellspacing="0" cellpadding="0" v-else>
        <thead>
        <th class="th" style="width: 100px">序号</th>
        <th class="th">关键词</th>
        <th class="th">关键词类型</th>
        <th class="th">用户</th>
        <!-- <th class="th">模型类型</th> -->
        <th class="th">添加用户</th>
        <th class="th" style="width: 200px">新增时间</th>
        <th class="th">操作</th>
        </thead>
        <tr v-for="(list,index) in lists" :key="index">
          <td class="">{{index+1|sequenceNumber(listParams.pageNum)}}</td>
          <td class="" :title="list.keyword">
              {{list.keyword}}
          </td>
          <td>
            <span class="blue" v-if="list.starLevel === 0">全部</span>
            <span class="red" v-if="list.starLevel === 1">一级关键词</span>
            <span class="yellow" v-if="list.starLevel === 2">二级关键词</span>
            <span class="green" v-if="list.starLevel === 3">三级关键词</span>
          </td>
          <td class="">{{list.realName | nothing}}</td>
          <!-- 用户 -->
          <!-- <td class="">非法集资模型</td> -->
          <!-- 模型类型 -->
          <td class="">{{list.createUser | nothing}}</td>
          <!-- 添加用户 -->
          <td class="">{{list.createTime | dateFormat}}</td>
          <!-- 新增时间 -->
          <td class=" blue cursor" @click="removelists(list)">
            <span>删除
            </span>
          </td>
        </tr>
      </table>
    </div>
    <div class="eltab">
      <span class="mt2 fl">
        关键词<span class="compnum"> {{taskTotal || 0}} </span>条
      </span>
      <div class="block paging-wrap fr" v-if="taskTotal > 10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listParams.pageNum"
          :page-size="listParams.pageSize"
          layout="prev, pager, next, jumper"
          :total="taskTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="show" title="新增关键词" class="addMessage" width="500px">
      <div class="table-wrap">
        <el-form ref="form" :model="form" label-position="right">
          <el-form-item label="关键词">
            <input type="text" v-model="form.keyword" class="keyword">
          </el-form-item>
          <el-form-item label="关键词类型">
            <el-radio-group v-model="form.starLevel">
              <el-radio :label="1">一级关键词</el-radio>
              <el-radio :label="2">二级关键词</el-radio>
              <el-radio :label="3">三级关键词</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户">
            {{form.realName}}
          </el-form-item>
          <el-form-item label="添加用户">
            {{form.createUser}}
          </el-form-item>
          <p class="center">
            说明： 关键词添加多个关键词用“ ; ”号隔开
          </p>
          <p class="center">
            <el-button type="primary" @click="toAddList(form)">确定</el-button><el-button type="primary" @click="noAdd()">取消</el-button>
          </p>
          <p class="center">
            <span class="bigred">
              {{mesg}}
            </span>
          </p>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { sysManage as api } from '../../api'
  import { jSelect, jDialog, jNoData } from "../../components"
  export default {
    name: "taskList",
    data() {
      return {
        selectedIndex: 0,
        show: false,
        form: {
          keyword:'',
          starLevel: '',
          realName: JSON.parse(sessionStorage.getItem('user')).realName,
          createUser: JSON.parse(sessionStorage.getItem('username')).username
        },
        lists: [ ],
        taskTotal: 1, // 任务总数
        listParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 关键词类型
        keyTypeList:[
          {
            name: '全部',
            flag: true
          },
          {
            name: '一级关键词',
            flag: false
          },
          {
            name: '二级关键词',
            flag: false
          },
          {
            name: '三级关键词',
            flag: false
          }
        ],
        keyTypeName: '',
        // 特征词
        personName:'',
        // 预警模型
        fliterDatas1: ["全部", "一般企业风险模型", "非法集资模型"],
        fliterData1: '非法集资模型',
        // 用户
        fliterDatas2: ["通用版关键词", "天津金融局"],
        fliterData2: '通用版关键词',
        // 筛选
        fliterDatas: [
          '按照时间', '按照关键词'
        ],
        fliterDataMap: ['CREATE_TIME', 'STAR_LEVEL'],
        fliterDataidx: 0,
        fliterData: '',
        fliterDatas3: [
          '正序', '倒序'
        ],
        fliterDataMap3: ['ASC', 'DESC'],
        fliterDataidx3: 0,
        fliterData3: '',
        fliterLabel:'',
        mesg:''
      }
    },
    watch: {
      // 筛选条件
      fliterData(value) {
        let label = this.fliterDataMap[this.fliterDatas.indexOf(value)]
        if (label) {
          this.fliterLabel = label
        }
        // this.dataChange()
        this.handleCurrentChange(1)
      },
      fliterData3(value) {
        let label3 = this.fliterDataMap3[this.fliterDatas3.indexOf(value)]
        if (label3) {
          this.fliterLabel3 = label3
        }
        // this.dataChange()
        this.handleCurrentChange(1)
      }
    },
    filters:{
      sequenceNumber(value, pageNum) {
        return (pageNum - 1) * 10 + value
      }
    },
    methods: {
      // 获取list列表
      getLists(params) {
        // console.log(params)
        api.getSelectOpinionKeyList(params).then(ret => {
          this.lists = ret.data.list
          this.taskTotal = ret.data.total
        })
      },
      handleSizeChange() {},
      // 换页
      handleCurrentChange(index) {
        this.listParams.pageNum = index
        this.dataChange(this.listParams)
      },
      // 改变关键词类型
      changeType(list) {
        this.keyTypeList.map((type, ind) => {
          type.flag = false
          if (type.name === list.name) {
            type.flag = true
            this.keyTypeName = ind
          }
        })
        this.handleCurrentChange(1)
      },
      // 搜索
      search() {
        let param = {
          isDeleted: false
        }
        this.dataChange(param)
      },
      // 增加list
      addlists() {
        this.show = true
      },
      noAdd() {
        this.show = false
        this.mesg = ''
        this.form.keyword = ''
        this.form.starLevel = ''
      },
      toAddList(mesg) {
        if (mesg.keyword && mesg.starLevel && mesg.keyword.indexOf(' ') === -1) {
          let param = { }
          for (let i in mesg) {
            if (mesg[i]) {
              param[i] = mesg[i]
            }
          }
          api.getconfigOpinionKeywordAddList(param).then(ret => {
            if (ret.code === 1) {
              this.mesg = ret.msg
              this.noAdd()
              setTimeout(() => {
                // this.form.keyword = ''
                // this.form.starLevel = ''
                // this.mesg = ''
                this.show = false
                this.dataChange()
              }, 2000)
            }
            //  else {
            //   this.tips(ret.msg, 'error')
            //   this.mesg = ret.msg
            //   setTimeout(() => {
            //     this.show = false
            //   }, 2000)
            // }
          }).catch(err => {
            this.mesg = err.msg
            setTimeout(() => {
              // this.mesg = ''
              // this.show = false
              this.noAdd()
            }, 2000)
          })
        } else {
          if (!mesg.keyword && !mesg.starLevel) {
            this.tips('请输入要增加的关键词和关键词类型', 'error')
          } else if (!mesg.keyword && mesg.starLevel) {
            this.tips('请输入要增加的关键词', 'error')
          } else if (mesg.keyword && !mesg.starLevel) {
            this.tips('请输入要增加的关键词类型', 'error')
          }
          if (mesg.keyword.indexOf(' ') !== -1) {
            this.tips('关键词不能为空且不能含有空格', 'error')
          }
        }
      },
      // 删list
      removelists(list) {
        let params = {
          id: list.id
        }
        api.getconfigOpinionKeyworDeleteList(params).then(ret => {
          if (ret.code === 1) {
            setTimeout(() => {
              this.dataChange()
            }, 1000)
          } else {
            this.tips(ret.msg, 'error')
          }
        })
      },
      // 数据改变
      dataChange(param) {
        let params = {
          pageSize: 10,
          pageNum: 1,
          isDeleted: false
        }
        // 特征词
        if (this.personName) {
          params.qName = 'keyword'
          params.qValue = this.personName
        } else {
          delete params.qName
          delete params.qValue
        }
        if (this.keyTypeName) {
          params.starLevel = this.keyTypeName
        } else {
          delete params.starLevel
        }
        // 排序
        if (this.fliterLabel) {
          params.sortColumn = this.fliterLabel
        } else {
          delete params.sortColumn
        }
        if (this.fliterLabel3) {
          params.order = this.fliterLabel3
        } else {
          delete params.order
        }
        if (param) {
          params = Object.assign(params, param)
        }
        this.getLists(params)
      }
    },
    mounted() {
      this.dataChange()
    },
    components: {
      jSelect,
      jDialog,
      jNoData
    }
  }
</script>
<style lang="scss" scoped>
  $width: 350px;
  $padding: 15px;
  .task {
    width: 100%;
    min-height: 600px;
    box-sizing: border-box;
    .blue {
      color: #12A3FF;
    }
    .red {
      color: #FF7200;
    }
    .bigred {
      color: #f00;
    }
    .yellow {
      color: #EEAD00;
    }
    .green {
      color: #00BF5E;
    }
    .bacblue {
      color: #12A3FF;
      background: #E8F4FF;
      border-color: #E8F4FF;
    }
    .addbackg {
      color: #FF7200;
      background: #FFECDB;
      border-color: #FFECDB;
    }
    .center {
      text-align: center;
      margin-top: 15px;
    }
    .keyword {
      width: 50%;
      border: #ccc 1px solid;
      height: 30px;
      border-radius: 5px;
    }
    .cursor {
      cursor: pointer;
    }
    .block{
      display: block;
    }
    .fr {
      display: block;
      float: right !important;
    }
    .fl {
      display: block;
      float: left !important;
    }
    .task .keyword {
      width: 80%;
    }
    /deep/ .el-dialog__header {
      padding: 10px;
      background: #3f8ffa;
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn {
        top: 12px;
        i {
          color: #fff;
        }
      }
    }
    .odds {
      height: 130px;
      padding: 30px 20px 0 20px;
      color: #999999;
      p {
        height: 34px;
        .searchItem {
          padding-right: $padding;
        }
        .searchItem + span{
          margin-right: 80px;
        }
        .companyName,
        .taskName,
        .personName {
          width: 190px;
          height: 34px;
        }
        .personNames {
          border: 1px solid #dcdfe6;
          color: #dcdfe6;
          width: 190px;
          height: 34px;
          line-height: 34px;
          display: inline-block;
          padding-left: 5px;
          border-radius: 5px;
          cursor: not-allowed;
        }
        .personName input{
          padding-left: 10px;
        }
        .left {
          margin-right: 100px;
        }
        .buttons {
          height: 100%;
          line-height: 100%;
          /*padding-left: 240px;*/
          .btn-search,
          .btn-reset {
            width: 113.5px;
            height: 34px;
            line-height: 8px;
          }
          .btn-search + .btn-reset {
            margin-left: 20px;
          }
        }
      }
      .col1 {
        padding-bottom: 30px;
        border-bottom: 1px solid #ccc;
        .space-mark{
          display: inline-block;
          width: 8px;
          height: 2px;
          vertical-align: middle;
          margin: 0 4px 0 8px;
          background-color: rgba(18, 108, 236, 0.5);
        }
      }
      .col2 {
        padding-top: 15px;
      }
    }
    .list {
      /*min-height: 520px;*/
      margin-top: 20px;
      padding: 20px 30px;
      table {
        td,
        th {
          text-align: center;
        }
      }
    }
    .taskTotal {
      width: 100%;
      height: 34px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding-top: 30px;
      .btn-download,
      .btn-newTask,
      .btn-taskMsg {
        height: 34px;
        line-height: 8px;
      }
      .btn-download ~ button {
        margin-left: 20px;
      }
      .publist-list-category {
        .searchItem {
          padding-right: $padding;
        }
        .searchItem + span{
          margin-right: 100px;
        }
      }
      .zeng {
        height: 34px;
      }
    }
    .lists {
      margin-top: 25px;
      border-radius: 3px;
      margin-bottom: 20px;
      .th {
        font-weight: 800;
      }
    }
  }
  .keyTypeList{
    display: inline-block;
    span{
      width: 130px;
      text-align: center;
      display: inline-block;
      height: 28px;
      border: 1px solid #ccc;
      line-height: 28px;
      border-radius: 5px;
      background-color: white;
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .eltab {
    height: auto;
    padding: 5px 40px;
    .mt2,
    .paging-wrap {
      margin-top: 20px;
    }
  }
  .compnum {
    color: #40a1f3;
    font-weight: bold;
  }
</style>




// WEBPACK FOOTER //
// src/view/sysManage/keyWord.vue